import React, { Component } from 'react';
import { StyleSheet, View, Text, Slider } from 'react-native';
import viewUtils from '../utils/View';
import { SafeAreaView } from 'react-navigation';
import BaseStyle from '../constants/Style';


export default class SliderScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 2500
    };
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.sliderView}>
        <Text>{this.state.value}</Text>
        <View style={styles.sliderViews}>
        <Slider
        style={styles.slider}
        minimumTrackTintColor={'#fff'}
        maximumTrackTintColor={'#fff'}
         minimumValue={500}
         maximumValue={5000}
          onSlidingComplete={(e)=>{
            this.setState({
              value:e
            })
          }}
          value={2500}
          step={500}
        />
        </View>
        </View>

   
       
     
       
       
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  sliderView:{
 
  },
  sliderViews:{
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    backgroundColor:"#fff",
    height:30,
    borderRadius:10,
    marginTop:10,
  },
  slider:{
    width:viewUtils.size.width-30,
    height:10,
    backgroundColor:"#fff"

  },
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
    paddingLeft: 30,
  },
  radView: {
    marginTop: 20,
  },
});
